<!-- 广告位编辑弹窗 -->
<template>
  <a-modal :width="550" :visible="visible" :confirm-loading="loading" :title="isUpdate ? '修改箱子' : '创建箱子'" :body-style="{ paddingBottom: '10px' }" @update:visible="updateVisible" @ok="save">
    <a-form ref="form" :model="form" :rules="rules" :label-col="{ md: { span: 5 }, sm: { span: 24 } }" :wrapper-col="{ md: { span: 19 }, sm: { span: 24 } }">
      <a-form-item label="箱子编号:" name="box_code">
        <a-input v-model:value="form.box_code" placeholder="请输入箱子编号" allow-clear />
      </a-form-item>

      <a-form-item label="箱子规格:" name="rule_id">
        <a-select v-model:value="form.rule_id" placeholder="请选择箱子规格" allow-clear>
          <a-select-option v-for="item in ruleList" :key="item.id" :value="item.id">
            {{ item.title }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="所属货架:" name="shelf_id">
        <a-tree-select
          allow-clear
          :tree-data="shelfList"
          tree-default-expand-all
          placeholder="请选择所属栏目"
          v-model:value="form.shelf_id"
          :dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"
        />
      </a-form-item>

      <a-form-item label="标签" name="tags">
        <a-select v-model:value="form.tags" mode="multiple" :options="optionsLabel" @change="handleChange"> </a-select>
      </a-form-item>

      <a-form-item label="排序号:" name="sort">
        <a-input-number :min="0" class="ele-fluid" placeholder="请输入排序号" v-model:value="form.sort" />
      </a-form-item>

      <a-form-item label="是否开封：" name="is_open">
        <a-radio-group v-model:value="form.is_open">
          <a-radio :value="0">否</a-radio>
          <a-radio :value="1">是</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="箱子状态：" name="status">
        <a-radio-group v-model:value="form.status">
          <a-radio :value="0">禁用</a-radio>
          <a-radio :value="1">启用</a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
export default {
  name: 'BoxAdd',
  emits: ['done', 'update:visible'],
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  data() {
    return {
      // 表单数据
      form: Object.assign({}, this.data),
      // 表单验证规则
      rules: {
        box_code: [{ required: true, message: '请输入箱子编号', type: 'string', trigger: 'blur' }],
        rule_id: [{ required: true, message: '请选择箱子规格', type: 'number', trigger: 'blur' }],

        shelf_id: [{ required: true, message: '请选择所属栏目', type: 'number', trigger: 'blur' }],
        sort: [{ required: true, message: '请输入排序号', type: 'number', trigger: 'blur' }]
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      // 箱子规格列表
      ruleList: [],
      // 货架列表
      shelfList: [],
      // 标签的数据
      optionsLabel: [],
      // 请求地址
      url: ''
    }
  },
  watch: {
    data() {
      if (Object.keys(this.data).length !== 0) {
        this.url = '/depot/box/update'
        this.getBoxInfo(this.data.id)
        //this.form = Object.assign({}, this.data);
        this.isUpdate = true
      } else {
        this.url = '/depot/box'
        this.form = { is_open: 0, sort: 0, status: 1 }
        this.isUpdate = false
      }

      if (this.$refs.form) {
        this.$refs.form.clearValidate()
      }
    }
  },
  mounted() {
    // 查询箱子规格列表
    this.queryRuleList()
    // 标签列表
    this.getLabelList()
    // 货架列表
    this.queryShelfList()
  },
  methods: {
    /* 保存编辑 */
    save() {
      this.$refs.form
        .validate()
        .then(() => {
          var data = []
          if (this.isUpdate) {
            data = {
              id: this.form.id,
              box_code: this.form.box_code,
              rule_id: this.form.rule_id,
              shelf_id: this.form.shelf_id,
              tags: this.form.tags,
              is_open: this.form.is_open,
              status: this.form.status,
              sort: this.form.sort
            }
          } else {
            data = this.form
          }

          this.loading = true
          this.$http
            .post(this.url, data)
            .then(res => {
              this.loading = false
              if (res.data.code === 0) {
                this.$message.success(res.data.msg)
                if (!this.isUpdate) {
                  this.form = {}
                }
                this.updateVisible(false)
                this.$emit('done')
                this.$router.push('/storage/box')
              } else {
                this.$message.error(res.data.msg)
              }
            })
            .catch(e => {
              this.loading = false
              this.$message.error(e.message)
            })
        })
        .catch(() => {})
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value)
    },
    handleChange() {
      console.log(this.form)
    },
    // 获取商品标签
    async getLabelList() {
      const res = await this.$http.get('/product/label')
      let arr = res.data.data.list
      let newArr = []
      arr.forEach(item => {
        newArr.push({ label: item.label_name, value: item.id })
      })
      this.optionsLabel = newArr
    },
    /* 查询栏目列表 */
    queryRuleList() {
      this.$http
        .get('/depot/box_rule')
        .then(res => {
          if (res.data.code === 0) {
            this.ruleList = res.data.data.list.map(d => {
              d.key = d.id
              d.value = d.id
              return d
            })
          } else {
            this.$message.error(res.data.msg)
          }
        })
        .catch(e => {
          this.$message.error(e.message)
        })
    },
    /* 查询栏目列表 */
    queryShelfList() {
      this.$http
        .get('/depot/shelf?is_tree=0')
        .then(res => {
          if (res.data.code === 0) {
            this.shelfList = this.$util.toTreeData(
              res.data.data.list.map(d => {
                d.key = d.id
                d.value = d.id
                d.title = d.shelf_code
                return d
              }),
              'id',
              'pid'
            )
          } else {
            this.$message.error(res.data.msg)
          }
        })
        .catch(e => {
          this.$message.error(e.message)
        })
    },
    getBoxInfo(id) {
      const hide = this.$message.loading('请求中..', 0)
      this.$http({ url: '/depot/box/' + id, method: 'get' })
        .then(res => {
          hide()
          if (res.data.code === 0) {
            this.form = Object.assign({}, res.data.data)
          } else {
            this.$message.error(res.data.msg)
            return false
          }
        })
        .catch(e => {
          hide()
          this.$message.error(e.message)
        })
    }
  }
}
</script>

<style scoped></style>
